<template>
	<view class="repair-wrap">
		<view class="repair-box u-p-l-30 u-p-r-30">
			<view class="header-li">
				<h3>姓名</h3>
				<text style="margin-left: auto; color: #333;font-weight: 600;font-size: 16px;">{{userObj.ry_name}}</text>
			</view>
			<view class="header-li">
				<h3>联系电话</h3>
				<text style="margin-left: auto; color: #333;font-weight: 600;font-size: 16px;">{{userObj.ry_tell}}</text>
			</view>
			<view class="header-li">
				<h3>状态</h3>
				<text style="margin-left: auto;font-weight: 600;font-size: 16px;">
				  <text :style="userObj.ins_state=='0'?'color: #f5a623'
								:userObj.ins_state == '2'?'color:#409EFF'
								:userObj.ins_state == '3'?'color:#f5a623'
								:userObj.ins_state == '6'?'color:#409EFF'
								:userObj.ins_state == 7?'color:red'
								:userObj.ins_state == 4?'color:#67C23A'
								:userObj.ins_state == 8?'color:red'
								:null">
					{{userObj.ins_state==0?"待受理"
					  :userObj.ins_state==1?"受理中"
					  :userObj.ins_state==2?"审核中"
					  :userObj.ins_state==3?"待赔付"
					  :userObj.ins_state==4?"已赔付"
					  :userObj.ins_state==5?"业主拒绝"
					  :userObj.ins_state==8?"处理拒绝"
					  :userObj.ins_state==6?"已受理待处理"
					  :userObj.ins_state==7?"受理拒绝":"暂无"}}
				  </text>
				</text>
	     	</view>
			<view class="header-li">
				<h3>理赔名称</h3>   
				<text style="margin-left: auto; color: #333;font-weight: 600;font-size: 16px;">{{userObj.ins_name?userObj.ins_name: '--'}}</text>
			</view>
		    <view class="header-li">
				<h3>理赔类型</h3>
				<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">
				  {{userObj.claims_type==1?"车辆理赔"
				:userObj.claims_type==2?"高空抛物":userObj.claims_type==3?"漏水漏电":userObj.claims_type==4?"设备设施"
					  :userObj.claimee_type==5?"交通事故":userObj.claims_type==6?"人身意外":userObj.claims_type==7?"工伤理赔"
						  :userObj.claims_type==8?"盗窃理赔":"---"}}
						  </text>
		    </view>
		    <view class="header-li">
				<h3>事件日期</h3>   
				<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">{{userObj.event_time.substring(0,10)}}</text>
		    </view>
		    <view class="header-li">
				<h3>要求金额</h3>   
				<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">{{userObj.tr_money?userObj.tr_money:'0'}}元</text>
		    </view>
		    <view class="header-li" style='padding: 30rpx 0 30rpx 0;display: block;line-height: 60rpx;'>
				<h3>理赔原因</h3>
				<view style="color: #999999;font-size: 16px;word-wrap: break-word;line-height: 20px;">{{userObj.ins_cer}}</view>
		    </view>
		    <view style="margin-top: 10px;font-size: 14px" >
				<text> 免赔金额为<text style="color: #f5a623;margin: 0 5px;">{{userObj.claims_amount}}</text>元,费用有<text style="color: #f5a623;margin: 0 5px;">
			  {{userObj.taking_sides==1?"物业公司":userObj.taking_sides==2?"业主本人":"暂无"}}</text>承担</text>
		    </view>
			<view class="" v-if='userObj.ins_state == 0'>
				<view style='line-height: 20px;margin-top: 30px;'>
					提示：你申请的理赔，正在待受理中，请耐心等待
				</view>
			</view>
			<view class="" v-if='userObj.ins_state == 6'>
				<view style='line-height: 20px;margin-top: 30px;'>
					提示：你申请的理赔，已确认受理了，离处理近了一步熬
				</view>
			</view>
			<view v-if='userObj.ins_state == 7' class="header-li" style='padding: 30rpx 0 30rpx 0;display: block;line-height: 60rpx;margin-top: 35px;border-top: 2px solid #f4f4f4;'>
				<h3>受理拒绝原因</h3>
				<view style="color: #999999;font-size: 16px;word-wrap: break-word;line-height: 20px;">{{userObj.refusal_ly?userObj.refusal_ly:'未留下拒绝原因'}}</view>
				<view style='line-height: 20px;margin-top: 10px;'>
					提示：受理结果未通过，如想得到理赔，请再次申请进行受理。
				</view>
			</view>
			<view v-if='userObj.ins_state == 8' class="header-li" style='padding: 30rpx 0 30rpx 0;display: block;line-height: 60rpx;margin-top: 35px;border-top: 2px solid #f4f4f4;'>
				<h3>处理拒绝原因</h3>
				<view style="color: #999999;font-size: 16px;word-wrap: break-word;line-height: 20px;">{{userObj.refusal_cl?userObj.refusal_cl:'未留下拒绝原因'}}</view>
				<view style='line-height: 20px;margin-top: 10px;'>
					提示：处理结果未通过，如想得到理赔，请再次申请进行受理。
				</view>
			</view>
			
			<view v-if='userObj.ins_state == 2 || userObj.ins_state == 3'>
				<!-- <view class="header-li" v-if="userObj.actual_amount" style='margin-top: 10px;'>
					<h3>实际金额</h3>   
					<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">{{userObj.actual_amount?userObj.actual_amount:'0'}}元</text>
				</view> -->
				<view class="header-li" v-if="userObj.payout_amount" style='padding: 30rpx 0 0rpx 0;'>
					<h3>预计赔付金额</h3>   
					<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">{{userObj.payout_amount?userObj.payout_amount:'0'}}元</text>
				</view>
				<text v-if="userObj.payout_amount" style='display: flex;color: #999;margin-top: -10px;'>提示：此金额为物业公司预计赔付金额</text>
				<view class="header-li" style='padding: 20rpx 0 30rpx 0;display: block;line-height: 60rpx;'>
					<h3>处理说明</h3>
					<view style="color: #999999;font-size: 16px;word-wrap: break-word;line-height: 20px;">{{userObj.ins_shuomin}}</view>
				</view>
				<view class="header-li" v-if="userObj.picture">
					<image @click="imageBig(userObj.picture)" :src="userObj.picture" style="width: 30px;height: 30px;"></image> 
				</view>
				
				<h3 class="" style='padding: 20px 0 10px;font-size: 18px;'>
					{{userObj.cz_user_id?'代业主同意操作':'业主同意操作'}}
				</h3>
				<view class="header-li">
					<h3>业主选择理赔方式</h3>   
					<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">
						{{userObj.pay_type==1?'现金'
							:userObj.pay_type==2?'微信'
							:userObj.pay_type==3?'支付宝'
							:userObj.pay_type==4?'银行卡'
							:'未知'}}
					</text>
				</view>
				<view class="header-li" v-if="userObj.pay_type==4">
					<h3>户名</h3>   
					<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">{{userObj.hu_name}}</text>
				</view>
				<view class="header-li" v-if="userObj.pay_type==4">
					<h3>开户行</h3>   
					<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">{{userObj.bank_cards_ka}}</text>
				</view>
				<view class="header-li" v-if="userObj.pay_type==4">
					<h3>银行卡号</h3>   
					<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">{{userObj.bank_cards_hao}}</text>
				</view>
				<view class="header-li" v-if="userObj.pay_type==3">
					<h3>支付宝号</h3>   
					<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">{{userObj.alipay_hao}}</text>
				</view>
				<view class="header-li" v-if="userObj.pay_type==2 && userObj.or_code">
					<h3>微信收款码</h3> 
					<image @click="imageBig(userObj.or_code)" :src="userObj.or_code" style="width: 30px;height: 30px;"></image> 
				</view>
				<view class="header-li" v-if="userObj.cz_user_id">
					<h3>代操作人</h3>   
					<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">{{userObj.cz_UserName}}</text>
				</view>
				<view class="header-li" v-if="userObj.cz_user_id">
					<h3>操作时间</h3>   
					<text style="margin-left: auto;color: #333;font-weight: 600;font-size: 16px;">{{userObj.ye_time}}</text>
				</view>
				<view class="header-li" v-if="userObj.ye_agree_picture">
					<h3>上传的图片</h3> 
					<image @click="imageBig(userObj.ye_agree_picture)" :src="userObj.ye_agree_picture" style="width: 30px;height: 30px;"></image> 
				</view>
				<view style='line-height: 20px;margin-top: 30px;padding-bottom: 20px;' v-if='userObj.ins_state == 2'>
					提示：你申请的理赔，正在审核中，请耐心等待
				</view>
				<view style='line-height: 20px;margin-top: 30px;padding-bottom: 20px;' v-if='userObj.ins_state == 3'>
					提示：你申请的理赔，财务正在审核，请耐心等待
				</view>
			</view>
	    </view>
	</view>
</template>

<script>
import { pathToBase64,base64ToPath } from '@/utils/image-tool.js'
import LbPicker from '@/components/lb-picker'
	export default {
		data() {
			return {}
		},
		computed: {},
		onLoad(options) {
		  const item = JSON.parse(decodeURIComponent(options.item));
		  this.userObj = item
		  if (this.userObj.ins_state == 2) {
			uni.setNavigationBarTitle({
				title: '审核中详情'
			})  
		  }
		  if (this.userObj.ins_state == 7) {
			uni.setNavigationBarTitle({
				title: '受理拒绝详情'
			})  
		  }
		  if (this.userObj.ins_state == 8) {
			uni.setNavigationBarTitle({
				title: '处理拒绝详情'
			})  
		  }
		  if (this.userObj.ins_state == 3) {
			uni.setNavigationBarTitle({
				title: '待赔付详情'
			})  
		  }
		  console.log(this.userObj,"0-0-----c--d-dd详情信息")
		},
		methods: {
			//点击图片放大
			imageBig(url){
				uni.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				})
			},
		}
	}
</script>

<style lang="scss">
	.repair-wrap {
		width: 100%;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;
        border-top: 4rpx solid #f4f4f4;
		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.guar-back-f {
		width: 100%;
		height: 20rpx;
		background: #f4f4f4;
	}

	.guar-class-box {
		width: 196rpx;
		height: 68rpx;
		border-radius: 34rpx;
		text-align: center;
		line-height: 68rpx;
		border: 2rpx solid #ccc;

		&:nth-child(3n) {
			margin-right: 0 !important;
		}
	}

	.guar-class-box-active {
		border-color: #FEEED6;
		background: #FEEED6;
		color: #F9A832;
	}

	.guar-back-f {
		width: 100%;
		height: 20rpx;
		background: #f4f4f4;
	}

	.guar-text textarea {
		width: 345px;
		height: 120px;
		background: #F2F3F5;
		padding: 16rpx 20rpx !important;
		box-sizing: border-box;
		border-radius: 30rpx;
	}

	.guarn-box {
		width: 100%;
		height: 216rpx;
	}

	.guarn-box2 {
		display: flex;
	}

	.guarn-box2-img {
		width: 216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;

		.guarn-box2-img-close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}

	.guarn-box2 image {
		width: 216rpx;
		height: 216rpx;
	}

	.guarn-box-img {
		width: 216rpx;
		height: 216rpx;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 4rpx;
	}

	.guarn-box-img image {
		width: 76rpx;
		height: 68rpx;
	}

	.guarn-box-txt {
		width: 420rpx;
		height: 216rpx;
		color: #999;
		float: left;
	}

	.guar-txt-time {
		float: right;
		text-align: right;
		width: 420rpx;
	}

	.custom-style {
		color: #F9AF3A;
	}

	.header-li {
		display: flex;
		font-family: PingFangSC-Medium, PingFang SC;
		line-height: 84rpx;
		color: #666;
	}

	.header-name {
		width: 186rpx;
	}

	.form-select {
		width: 480rpx;
		background: url(../../static/image/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}

	.input1 {
		width: 400rpx;
		text-align: left;
		margin-top: 8px;
		line-height: 200%;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		background: #F9A832;
		background-color: #F9A832;
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}
</style>
